<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_974371_cqiyab42oyq.css">
  <title>我的简历</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: #fff;
      margin: 0 auto;
      padding: 1em;
      overflow: auto;
    }

    ul {
      margin-left: 1em;
    }

    li {
      margin-top: 5px;
    }

    body {
      background: #eee;
      font: 14px / 1.5 Arial;
      color: #333;
    }

    a {
      color: #696969;
      text-decoration: none;
      font: 14px / 1.5 Arial;
      font-weight: 600;
    }

    body .text {
      grid: auto auto auto / auto 300px 450px auto;
      display: grid;
    }

    header {
      font-size: 16px;
      grid-area: 1 / 1 / auto / span 4;
    }

    main {
      grid-area: 3 / 2 / auto / span 4;
    }

    aside {
      grid-area: 2 / 2 / auto / span 4;
    }




    /*page*/

    header {
      text-align: center;
      color: #fff;
      background: #444;
      padding: 10px;
    }

    header figcaption {
      margin-top: 5px;
      font-weight: bold;
    }

    header figure p {
      color: #ccc;
      margin-top: 5px;
    }

    section {
      grid: auto auto / 50px 100px 1fr;
      align-items: center;
      margin-top: 10px;
      padding: 5px;
      display: grid;
    }

    section>.iconfont {
      width: 30px;
      height: 30px;
      text-align: center;
      color: #fff;
      background: #66a9a3;
      border-radius: 50%;
      grid-area: 1 / 1;
      font-size: 20px;
      display: block;
    }

    section>h2 {
      grid-area: 1 / 2;
      font-size: 18px;
    }

    section>hr {
      height: 3px;
      background: #66a9a3;
      border: none;
      grid-area: 1 / 3;
    }

    section>.detail {
      grid-area: 2 / 2 / auto / span 2;
    }

    section>.personal {
      grid-area: 2 / 2 / auto / span 2;
      display: flex;

    }

    section .icon-list {
      align-items: center;
      display: flex;
      margin: 0 10px;
    }

    section .icon-list .iconfont {
      margin-right: 5px;
      font-size: 20px;
    }

    section .skill-bar dt {
      margin-top: 8px;
    }

    section .skill-bar dd {
      height: 3px;
      background: #eaeaea;
    }

    section .skill-bar dd div {
      height: 100%;
      background: #66a9a3;
      margin-top: 5px;
    }

    section .timeline-panel {
      grid: auto auto / 1fr 320px auto;
      align-items: center;
      margin-top: 8px;
      display: grid;
    }

    section .timeline-panel .details2 {
      grid-area: 2/ 2 / auto / span 2;
      margin-top: 5px;
    }

    section .timeline-panel .date {
      grid-area: 1 / 2;
    }

    section .timeline-panel>span {
      grid-area: 1 / 3;
      margin: 0;
    }

    section .timeline-panel>h4 {
      grid-area: 1 / 1;
    }

    section .timeline-panel .intro {
      grid-area: 1 / 3;
    }

    section .timeline-panel .detail {
      grid-area: 2 / 1 / auto / span 3;
      margin-top: 5px;
    }

    /*手机端*/

    section .detail strong {
      color: #f60;
    }

    @media (max-width: 500px) {
      article {
        width: auto;
        height: auto;
      }

      body .text {
        grid: auto auto auto / 1fr;
        padding: 0 10px 10px 10px;
      }

      header {
        grid-column: 1;
        grid-row: 1;
      }

      main {
        grid-column: 1;
        grid-row: 3;
      }

      aside {
        grid-column: 1;
        grid-row: 2;
      }

      section {
        grid: auto auto / 50px 120px 1fr;
        align-items: center;
        margin-top: 10px;
        padding: 5px;
        display: grid;
      }

      section>.personal {
        grid-area: 2 / 2 / auto / span 2;
        display: flex;
        flex-direction: column;
      }



      section .timeline-panel {
        grid: auto auto auto auto / 1fr auto;
        align-items: center;
        margin-top: 8px;
        display: grid;
      }

      section .timeline-panel .date {
        grid-area: 2 / 1;
      }

      section .timeline-panel>span {
        grid-area: 3 / 1;
        margin: 0;
      }

      section .timeline-panel>h4 {
        grid-area: 1 / 1;
      }

      section .timeline-panel .intro {
        grid-area: 1 / 2;
      }

      section .timeline-panel .detail {
        grid-area: 4 / 1 / auto / span 2;
        margin-top: 5px;
      }

    }
  </style>
</head>

<body>
  <article>
    <div class="text">
      <header>
        <figure>
          <figcaption>郭颖佳</figcaption>
          <p>应聘前端工程师</p>
        </figure>
      </header>
      <main>
        <section>
          <span class="iconfont icon-project"></span>
          <h2>项目经历</h2>
          <hr>
          <div class="detail">
            <div class="timeline-panel">
              <h4>青柠记账</h4>
              <span>
                <a href="https://github.com/Starry29/github-page-demo1">源码链接</a>
                <a href="http://lime-test-1317161083.cos-website.ap-shanghai.myqcloud.com">项目预览</a>
              </span>
              <div class="detail">
                <ul>
                  <li>技术栈：Vite 3 、 Vue 3  、TSX</li>
                  <li>项目描述：
                    <ul>
                      <li>
                        这个记账应用是一个基于<strong>Vue 3 / TSX / Vite 3</strong>的单页面应用程序。
                      </li>
                      <li>
                        本项目旨在开发一个简单易用的记账应用程序，帮助用户轻松管理自己的财务记录。用户可以进行日常生活中各项收支流水的记账，具有记账、查看历史消费分类数据、查看可视化图表数据等功能。
                      </li>
                      <li>
                        可适配手机、平板、PC 端，主要针对手机页面进行优化，可获得最佳使用体验。
                      </li>
                      <li>
                        主要页面有:欢迎页面、记账页面、标签编辑页面、统计图表页面、历史消费分类列表页面、登录页面等。
                      </li>
                      <li>
                        项目的各页面切换同样采用前端路由，用户数据采用 Pinia 管理。
                      </li>
                    </ul>
                  <li>项目经验</li>
                  <ul>
                    <li>采用<strong>TSX</strong>语言是一种崭新的挑战，TSX 是 TypeScript 和 JSX 两种语言的结合。在 TSX 中，我们可以使用 JSX 语法来编写 HTML
                      标记，同时也可以使用 TypeScript 的类型检查机制，来提高代码的健壮性和可维护性。</li>
                    <li>
                      分析设计需求，将项目中各个页面也进行组件化的拆分，为了使代码更简洁，使用了大量的<strong>插槽</strong>和<strong>v-model</strong>，并将具备重复功能的组件进行封装，减少重复。
                    </li>
                    <li>由于各页面和组件之数据流向复杂，故统一使用<strong> Pinia </strong>作为状态管理库，提供可扩展、类型安全的状态管理，简化应用程序的状态管理。</li>
                    <li>使用了<strong>Transition</strong>来实现页面动画切换，为解决svg加载慢，动画不流畅的问题，自制<strong>Vite SVG
                        Sprites</strong>插件将所有SVG放入一个大的SVG中，并使用<strong>Hooks</strong>来支持欢迎界面手势滑动。</li>
                    <li>引入了<strong>Vant UI</strong>实现日期选择。并自制了<strong>表单验证器</strong>进行校验。</li>
                    <li>可视化部分引入 Echarts 模块，通过查阅文档和实例，实现了两种数据可视化形式，折线图和饼图，熟悉了可视化模块的使用。熟练使用 JS，将用户数据重新分类处理成不同的形式，提供给
                      Echarts 使用。</li>
                    <li>使用了<strong>vue Router</strong>进行登录页面<strong>鉴权</strong>和<strong>路由守卫</strong>。</li>
                    <li>借助<strong>JWT</strong>实现登录接口，在请求中将 JWT 包含在标头或作为参数，从而允许服务器验证请求的真实性并授权用户。</li>
                    <li>使用<strong>Axios</strong>封装前端请求，先自制一个中间层对<strong>Axios</strong>进行一次封装，然后封装统一的错误处理，加载中等请求。</li>
                    <li>拿到 API 文档，并进行了前后端<strong>联调</strong>。</li>
                  </ul>
                  </li>
                </ul>
              </div>
            </div>
            <div class="timeline-panel">
              <h4>Windmill UI</h4>
              <span>
                <a href="https://github.com/Starry29/gulu-ui-1">源码链接</a>
                <a href="https://starry29.github.io/windmill-website/#/">项目预览</a>
              </span>
              <div class="detail">
                <ul>
                  <li>技术栈：Vite 、 Vue  、TypeScript</li>
                  <li>项目描述:</li>
                  <ul>
                    <li>Windmill UI是一个基于<strong>Vue + TypeScript + Vite</strong>的UI框架</li>
                    <li>主要组件有Button组件、Switch组件、Dialog对话框、Tab导航、Tag标签、Popover弹出框、Carousel走马灯、Input输入框等。</li>
                    <li>组件简洁美观易用，泛用性强，可作为前端开发的效率工具。组件样式采用了简洁风的设计，组件源代码也非常简洁，文档中具有良好的代码提示。</li>
                    <li>UI组件封装制作过程，让我对 Vue 3 有了更深的理解，对 TypeScript 规范有了新的认识。</li>
                  </ul>
                  <li>项目经验:</li>
                  <ul>
                    <li>使用 <strong>Vite</strong> 前端开发工具进行构建，其对于 Vue 3 、TypeScript 组合支持性极佳，项目的构建快捷高效。开发过程中项目中各个组件拆分合理，分析需求、分解思路清晰，可实现高效模块化编程开发。</li>
                    <li>使用前端路由 <strong>VueRouter</strong> 搭建 SFC 单文件应用，避免发送不必要的服务器请求，降低负担</li>
                    <li>Vue 3 有许多新特性和功能，其中最突出一点就是组合式 API，围绕 setup 入口函数进行编程，用于更好地组织和复用组件逻辑。打破Vue 2 的模板语法固有模式，同时也可结合使用</li>
                    <li>可以使用 <strong>props</strong> 和<strong>自定义事件</strong>解决父子组件之间的通信问题。也可以通过 <strong>inject / provide</strong> 组合方法轻松实现跨级访问祖先组件属性和方法，以此来实现功能切换。</li>
                    <li>采用 <strong>TypeScript</strong> 语言代替 JavaSeript 进行开发，规范变量、对象的定义和传参类型，通过类型检查更早发现及修正 bug 。并且 TypeScript 具有更好的智能提示，可通过安装一些播件加强体验</li>
                    <li>封装组件需要注意<strong>CSS最小影响原则</strong>，各项设置尽量只影响自己封装的组件。不要影响用户的项目编写,不要与用户常见的命名冲突。</li>
                  </ul>
                </ul>
              </div>
            </div>
            <div class="timeline-panel">
              <h4>big screen</h4>
              <span>
                <a href="https://github.com/Starry29/big-screen-demo">源码链接</a>
                <a href="https://i-want-to-make-salted-fish.gitee.io/big-screen">项目预览</a>
              </span>
              <div class="detail">
                <ul>
                  <li>技术栈：<strong>React</strong>、<strong>ReactRouter</strong>、<strong>Echarts</strong></li>
                  <li>这个项目是我在学习前端可视化与 echarts 时写的一个项目。</li>
                  <li>页面布局使用了 Grid 和 Flex 布局，为了适应所有屏幕，我使用了<strong>动态 rem 方案</strong>。具体思路见<a
                      href="https://zhuanlan.zhihu.com/p/617045784">我的博客</a>。</li>
                  <li>项目中包含的图例有柱形图、折线图、饼图、地图和表格等，并且大部分图例都可以实时更新数据并辅以动画交互。</li>
                  <li>通过这个项目，我掌握了大屏可视化项目的制作技巧。也帮助我更好地理解和使用Echarts和React</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        <section>
          <span class="iconfont icon-project"></span>
          <h2>开源项目</h2>
          <hr>
          <div class="detail">
            <div class="timeline-panel">
              <h4>canvas painting</h4>
              <span>
                <a href="https://github.com/Starry29/painting">源码私有</a>
                <a href=" https://i-want-to-make-salted-fish.gitee.io/canvas-painting">项目预览</a>
              </span>
              <div class="detail">
                <ul>
                  <li>我在学习 <strong>Canvas</strong> 时做的一个小作品</li>
                  <li>具有画笔绘画，选择画笔颜色，橡皮擦擦除，选择画笔粗细，一键清屏，保存等功能。</li>
                  <li>制作过程让我对 Canvas 有了更深入的认识和应用。</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        <section>
          <span class="iconfont icon-experience"></span>
          <h2>工作经历</h2>
          <hr>
          <div class="detail">
            <div class="timeline-panel">
              <h4>甬矽电子（宁波）股份有限公司</h4>
              <div class="date">03/2021~04/2022</div>
              <p class="intro">技术员</p>
              <div class="detail">
                <ul>
                  <li>
                    独立负责ESD数据的测量与整合，ESD文档撰写，并负责给ESD测量较弱的同事进行培训，提高其ESD测量的工作效率。
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        <section>
          <span class="iconfont icon-education"></span>
          <h2>教育经历</h2>
          <hr>
          <div class="detail">
            <div class="timeline-panel">
              <h4>金华职业技术学院</h4>
              <div class="date">09/2018~07/2021</div>
              <p class="intro">应用电子技术专业 专科</p>
            </div>
          </div>
        </section>
      </main>
      <aside>
        <section>
          <span class="iconfont icon-personal"></span>
          <h2>基本信息</h2>
          <hr>
          <div class="personal">
            电话:<a href="tel:18457552195" class="icon-list">18457552195</a>
            微信:<div class="icon-list">18457552195</div>
            邮件:<a href="mailto:18457552195@126.com" class="icon-list">18457552195@126.com</a>
            博客:<a href="https://www.zhihu.com/people/mu-mo-60-88" class="icon-list">知乎</a>
          </div>
        </section>
        <section>
          <span class="iconfont icon-skills"></span>
          <h2>技能掌握</h2>
          <hr>
          <div class="detail">
            <ul>
              <li>熟悉页面制作技巧，能将设计稿<strong>完美还原</strong> </li>
              <li>熟悉<strong>前后端分离</strong>技术，包括 AJAX、跨域、前端路由、Cookie、Session 等</li>
              <li>熟练掌握 <strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
              <li>了解 React，包括 create-react-app、ReactRouter、Redux 等</li>
              <li>熟悉 ES6，包括 let / Promise / await / 析构赋值</li>
              <li>了解 <strong>TypeScript</strong> 的使用，我的项目就是 TS 实现的</li>
              <li>了解 <strong>Webpack 的配置和优化</strong></li>
            </ul>
          </div>
    </div>
    </div>
    </section>
    </aside>
    </div>
  </article>
</body>

</html>